// App.js - 使用示例
import { useState } from 'react';
import VideoPlayer from './VideoPlayer';
import axios from 'axios';

function App() {
  const [videoUrl, setVideoUrl] = useState('');

  // 模拟从后端获取的 m3u8 流媒体地址
  const sampleVideos = [
    {
      title: '示例视频 1',
      url: 'https://example.com/video1.m3u8',
      poster: '../public/placeholder.jpg'
    },
    {
      title: '示例视频 2',
      url: 'https://example.com/video2.m3u8',
      poster: 'https://example.com/poster2.jpg'
    }
  ];

  return (
    <div className="App" style={{ width: '100%' }}>
      <header style={{ padding: '20px', textAlign: 'center' }}>
        
        {/* 模拟 API 接入 */}
        <div style={{ marginBottom: '20px' }}>
          <input
            type="text"
            placeholder="输入 m3u8 流媒体地址"
            value={videoUrl}
            onChange={(e) => setVideoUrl(e.target.value)}
            style={{ 
              padding: '10px', 
              width: '300px', 
              marginRight: '10px',
              borderRadius: '4px',
              border: '1px solid #ccc'
            }}
          />
          <button 
            onClick={() => setVideoUrl(videoUrl)}
            style={{
              padding: '10px 20px',
              backgroundColor: '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            播放
          </button>
        </div>
      </header>

      <button onClick={() => {
        axios.get('/api/playback/7oCt4OtE7V').then(res => {
          console.info(`%c${res.data.progress}`, "font-weight:bold")
        })
      }}>获取进度</button>

      <main style={{ padding: '20px' }}>
        {videoUrl && (
          <VideoPlayer 
            videoSrc={videoUrl}
            poster={sampleVideos[0]?.poster} // 使用第一个视频的海报作为示例
          />
        )}
      </main>
    </div>
  );
}

export default App;